<template>
  <div class="detailContainer">
    <div class="detailHeader">
      <van-sticky :offset="0">
        <div class="search">
          <van-search
            class="searchInp"
            :v-model="router.currentRoute.value.query.keyword"
            :placeholder="router.currentRoute.value.query.keyword as string"
            show-action
            @clear="onCancel"
            @cancel="onCancel"
            :clearable="true"
            @focus="backSearch"
          />
        </div>
      </van-sticky>
      <div class="conditions">
        <van-tabs
          class="tabList"
          sticky
          offset-top="44"
          v-model:active="active"
          title-active-color="#dd1a21"
          @click-tab="changeOverlay"
        >
          <van-tab title-class="tabItem" v-for="(item, index) in optionList">
            <template #title> {{ item }} <van-icon v-if="index === 1" name="sort" /></template>

            <div class="goodsList">
              <div class="good" @click="toGoodDetail" v-for="good in userDetailList.directlyList" :key="good.id">
                <div class="imgWarp">
                  <img class="goodImg" :src="good.listPicUrl" alt="" />
                  <img class="icon" src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" alt="" />
                </div>

                <div class="goodTitle">
                  <img class="textIcon" src="https://yanxuan.nosdn.127.net/static-union/1669863110ec230b.png" alt="" />
                  {{ good.name }}
                </div>
                <div class="usableRedPacket">
                  <img class="logo" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="" />
                  <span>可用红包</span>
                </div>
                <div class="price"><span style="font-size: 12px">到手￥</span>{{ good.retailPrice }}</div>
                <div class="specialOffer">满69减20元</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 价格排序 -->
    <van-overlay class="van-overlay" :show="showNum === 1" @click="showNum = 0">
      <div class="wrapper" @click.stop>
        <div class="priceWarp">
          <div class="price">
            <div class="select">
              <div class="text">筛选</div>
              <div class="inpBox">
                <input type="text" placeholder="最低价" v-model="lowPrice" class="inp" />
                <div class="line"></div>
                <input type="text" placeholder="最高价" v-model="heightPrice" class="inp" />
              </div>
            </div>
            <div class="sort">
              <div class="text">排序</div>
              <div class="sortBox">
                <div class="sortBtn" :class="{ active: sortPriceData }" @click="sortPriceData = true">从低到高</div>
                <div class="sortBtn" :class="{ active: !sortPriceData }" @click="sortPriceData = false">从高到低</div>
              </div>
            </div>
          </div>
          <div class="btnWarp">
            <van-button class="btn" type="default" square plain hairline @click="showNum = 0">取消</van-button>
            <van-button class="btn" type="default" square plain hairline @click="changeSortPriceBtn">确定</van-button>
          </div>
        </div>
      </div>
    </van-overlay>

    <!-- 分类 -->
    <van-overlay class="van-overlay" :show="showNum === 2" @click="showNum = 0">
      <div class="wrapper" @click.stop>
        <div class="catrgoryWarp">
          <van-tag
            class="takeItem"
            :class="{ active: index === 0 }"
            v-for="(category, index) in userDetailList.categoryL1List"
            :key="category.id"
            @click-tab="toSearch(category.id)"
            plain
            size="medium"
            type="primary"
            >{{ category.name }}</van-tag
          >
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { nextTick } from 'vue'

export default defineComponent({
  name: 'SearchDetail'
})
</script>
<script lang="ts" setup>
import { onMounted, ref, watch, onUpdated } from 'vue'
import { storeToRefs } from 'pinia'
import { userSearchStore } from '@/stores/modules/search'
import { useRouter } from 'vue-router'
import _ from 'lodash'
const active = ref('a')
// 接收父组件传递value
defineProps(['value'])
// 接收自定义事件
const emits = defineEmits(['isDetailFun'])
// 路由对象
const router = useRouter()
// 分类导航数据
const optionList = ['综合', '价格', '分类']
const show1 = ref<boolean>(true)
// 切换遮罩层
const showNum = ref<number>(0)

// store仓库
const searchStore = userSearchStore()
const { searchDetailData, text } = storeToRefs(searchStore)

const userDetailList = ref<any>({})
// 监听赋值
watch(
  () => searchDetailData.value.directOrginQuery,
  () => {
    userDetailList.value = _.cloneDeep(searchDetailData.value)
  },
  {
    deep: true
  }
)

// name事件类型
interface NameData {
  name: number
}
const changeOverlay = (name: NameData) => {
  showNum.value = name.name
}

// 点击切换价格排序
const heightPrice = ref<string>('')
const lowPrice = ref<string>('')
const sortPriceData = ref<boolean>(true)
const changeSortPriceBtn = function () {
  // 价格范围
  if (heightPrice.value.trim() !== '' && lowPrice.value.trim() !== '') {
    const newArr = searchDetailData.value.directlyList.filter((item: any) => {
      if (item.retailPrice > +lowPrice.value && item.retailPrice < +heightPrice.value) {
        return item
      }
    })

    userDetailList.value.directlyList = newArr
  }

  nextTick(() => {
    // 价格排序
    if (sortPriceData.value) {
      userDetailList.value.directlyList.sort((first: any, last: any) => first.retailPrice - last.retailPrice)
    } else {
      userDetailList.value.directlyList.sort((first: any, last: any) => last.retailPrice - first.retailPrice)
    }
    showNum.value = 0
  })
}

// 点击分类去搜索
const toSearch = (id: string) => {
  const keyWord = id

  // searchStore.getSearchDetailData(router.currentRoute.value.query.keyWord as string)
  // userDetailList.value = _.cloneDeep(searchDetailData)
}

// 返回搜索页面
const backSearch = () => {
  emits('isDetailFun', true)

  router.push('/search')
}

// 点击取消
const onCancel = () => {
  emits('isDetailFun', true)
  router.push('/search')
}

// 获取初始数据
// const getDetailInfo = () => {
//   const keyWord = router.currentRoute.value.query.keyword
//   const data = ref(userDirectlyList._object)

//   // searchStore.getuserSearchDetail(keyWord as string)
// }
// 监听路由获取初始数据
watch(
  router.currentRoute,
  () => {
    searchStore.getSearchDetailData(router.currentRoute.value.query.keyword as string)
  },
  {
    // immediate: true,
    deep: true
  }
)

// 跳转商品详情页面
const toGoodDetail = () => {
  router.push('/detail')
}

onMounted(() => {
  // 获取页面初始数据
  // getDetailInfo()
  // console.log(11)
})
</script>

<style lang="less" scoped>
.detailContainer {
  // position: relative;
  // height: 100vh;
  // overflow: visible;
  // height: 100%;
  width: 100%;
  .detailHeader {
    display: flex;
    flex-direction: column;
    // position: absolute;
    // top: 0;
    .conditions {
      height: 44px;
      background-color: #fafafa;
      border-bottom: red;

      .tabList {
        :deep(.van-tab__text--ellipsis) {
          font-weight: normal;
        }
        :deep(.van-tabs__line) {
          width: 0;
        }
        :deep(.van-tabs__wrap) {
          border-bottom: 1px solid #d9d9d9;
        }
        .goodsList {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin: 0 10px;
          align-content: flex-start;
          margin-top: 10px;
          .good {
            width: 172.5px;
            height: 290px;
            .imgWarp {
              width: 172.5px;
              height: 172.5px;
              position: relative;
              border-radius: 5%;
              overflow: hidden;
              .goodImg {
                width: 100%;
                height: 100%;
              }
              .icon {
                position: absolute;
                top: 7px;
                right: 7px;
                width: 52.5px;
                height: 27px;
              }
            }

            .goodTitle {
              width: 100%;
              margin-top: 6px;
              font-size: 14px;
              display: flex;
              align-items: center;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              border: 0px;
              max-height: 40px;
              overflow: hidden;
              .textIcon {
                width: 23.5px;
                height: 15px;
                margin-right: 5px;
              }
            }
            .usableRedPacket {
              width: 51px;
              height: 13px;
              padding: 0 4px 0 2px;
              margin: 4px 4px 0 0;
              border-radius: 64px;
              font-size: 10px;
              border: 1px solid #7f7f7f;
            }
            .logo {
              width: 10px;
              height: 10px;
            }

            .price {
              font-size: 20px;
              height: 30px;
              color: #fa1e32;
              font-weight: bold;
            }
            .specialOffer {
              background-color: #fa1e32;
              color: #fff;
              width: 55px;
              text-align: center;
              vertical-align: bottom;
              font-weight: bold;
              border-radius: 64px;
              height: 15px;
              padding: 2px 6px;
              font-size: 10px;
            }
          }
        }
      }
    }
    .search {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      .searchInp {
        width: 360px;
        height: 28px;
        padding: 0 10px;
        border-radius: 8px;
      }
    }
  }
  .van-overlay {
    top: 90px;
    :deep(.wrapper[data-v-076a0d00]) {
      position: absolute;
      width: 100%;
      left: 0;
      background-color: #ffffff;
      z-index: 10;
      .priceWarp {
        padding: 20px 15px 0;
        height: 169px;
        .price {
          width: 100%;
          font-size: 14px;
          height: 76px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .select {
            display: flex;
            align-items: center;
            .text {
              width: 28px;
              height: 21px;
              margin-right: 12px;
            }
            .inpBox {
              display: flex;
              align-items: center;
              .inp {
                width: 130px;
                height: 21px;
                text-align: center;
              }
              .line {
                display: inline-block;
                margin: 0 5px;
                width: 15px;
                height: 1px;
                background: #7f7f7f;
              }
            }
          }
          .sort {
            display: flex;
            align-items: center;

            .text {
              width: 28px;
              height: 21px;
              margin-right: 12px;
            }
            .sortBox {
              display: flex;
              .sortBtn {
                width: 102px;
                height: 26px;
                border: 1px solid #767676;
                margin-right: 12px;
                text-align: center;
                border-radius: 2px;
                line-height: 26px;
                &.active {
                  color: #dd1a21;
                  border-color: #dd1a21;
                }
              }
            }
          }
        }
        .btnWarp {
          position: absolute;
          width: 375px;
          left: 0;
          bottom: 0;
          .btn {
            height: 52px;
            width: 50%;
            color: #333333;
          }
        }
      }
      .catrgoryWarp {
        padding: 20px 32.5px;
        .takeItem {
          height: 27px;
          font-size: 14px;
          max-width: 60px;
          margin: 0 20px 20px 0;
          padding: 0 9px;
          color: #333;
          border-color: #999;
          &.active {
            border-color: #dd1a21;
            color: #dd1a21;
          }
        }
      }
    }
  }

  // .wrapper {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   height: 100%;
  // }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
}
input::-ms-input-placeholder {
  text-align: center;
}
input::-webkit-input-placeholder {
  text-align: center;
}
</style>
